<template>
  <div>
    <div class="fill"></div>
    <div class="bbs_head">
      <div class="bbs_class">
        <Button type="primary" size="large" ghost>最新帖子</Button>
        <Button type="primary" size="large" ghost>精华热帖</Button>
        <Button type="primary" size="large" ghost>游戏交流</Button>
        <Button type="primary" size="large" ghost>技术问题</Button>
        <Button type="primary" size="large" ghost>好物分享</Button>
        <Button type="primary" size="large" ghost>其他分类</Button>
      </div>
      <div class="bbs_search">
        <Input v-model="search" size="large" style="width: 250px" placeholder="搜索帖子" clearable/>
        <Button type="primary" size="large" icon="ios-search" @click="searchEvent">搜索</Button>
      </div>
    </div>
    <div class="main_page">
      <List item-layout="vertical">
        <ListItem v-for="(item,index) in msg_list" :key="index">
          <ListItemMeta :avatar="item.avatar" :title="item.title" :description="item.description"/>
          {{ item.content }}
          <template slot="extra">
            <p>2019年12月18日 23:48:23</p>
            <p>23楼</p>
          </template>
        </ListItem>
      </List>
    </div>
    <div class="paging">
      <Page :total="40" size="small" show-elevator show-sizer/>
    </div>
  </div>
</template>

<script>
  export default {
    name: "leave",
    data: () => ({
      search: '',
      msg_list: [
        {
          title: '挽梦Kris',
          description: '这个人很懒,没有个性签名',
          avatar: 'https://dev-file.iviewui.com/userinfoPDvn9gKWYihR24SpgC319vXY8qniCqj4/avatar',
          content: '今天是2019年12月18日 23:54:45,今天是2019年12月18日 23:54:45'
        },
        {
          title: '挽梦Kris',
          description: '这个人很懒,没有个性签名',
          avatar: 'https://dev-file.iviewui.com/userinfoPDvn9gKWYihR24SpgC319vXY8qniCqj4/avatar',
          content: '今天是2019年12月18日 23:54:45,今天是2019年12月18日 23:54:45'
        },
        {
          title: '挽梦Kris',
          description: '这个人很懒,没有个性签名',
          avatar: 'https://dev-file.iviewui.com/userinfoPDvn9gKWYihR24SpgC319vXY8qniCqj4/avatar',
          content: '今天是2019年12月18日 23:54:45,今天是2019年12月18日 23:54:45'
        }
      ]
    }),
    methods: {
      searchEvent() {
        alert(this.search)
      }
    }
  }
</script>

<style scoped>
  .fill {
    width: 1px;
    height: 1px;
  }

  .main_page {
    width: 90%;
    height: 70vh;
    margin: 30px auto;
  }

  .bbs_head {
    width: 96%;
    margin: 0 auto;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }

  .bbs_class {
    width: 65%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }

  .bbs_search {
    width: 33%;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
  }

  .paging {
    width: 60%;
    text-align: center;
    margin: 0 auto;
  }
</style>
